<template>
  <u-popup
    class="popupstyle"
    v-model="delivershow"
    :mask-close-able="false"
    mode="bottom"
    @close="close"
  >
    <view class="popuphead">{{$t('locales.shippingInfo')}}</view>
    <view class="delivecontent">
      <view class="popuppage">
        <span></span>
        <view class="time">{{$t('locales.shippingAddressAndTime')}}</view>
        <view v-if="deliverdata.deliveryInfo && goodsinfo.login">
          <view class="gopop">{{ deliverdata.deliveryInfo.addressTime }}</view>
        </view>
        <view v-if="deliverdata.areaInfoList">
          <view v-if="deliverdata.areaInfoList.length === 0 || !goodsinfo.login">
            <view class="gopop">{{$t('locales.noneShipping')}}</view>
          </view></view
        >
      </view>
      <view class="popuppage">
        <span></span>
        <view class="time">{{$t('locales.scopeOfDelivery')}}</view>
        <view class="gopop" v-if="deliverdata.deliveryInfo && goodsinfo.login"
          >{{$t('locales.scopeOfDeliveryMsg')}}</view
        >
        <view v-if="deliverdata.areaInfoList">
          <view
            class="gopop"
            v-if="deliverdata.areaInfoList.length === 0 || !goodsinfo.login"
            >{{$t('locales.noneDelivery')}}</view
          >
        </view>
      </view>
      <view v-if="goodsinfo.login">
        <view
          class="messge"
          v-for="item in deliverdata.areaInfoList"
          :key="item.countryName"
        >
          <view class="messgeone">{{ item.countryName }}</view>
          <view
            class="wightcontent"
            v-if="deliverdata.deliveryInfo.chargeMode === 2"
          >
            <view
              class="weight"
              v-for="data in item.freightInfoDTOList"
              :key="data.endWeight"
            >
              <view v-if="data.endWeight !== 0"
                >{{ data.startWeight }} - {{ data.endWeight }}KG
                {{ goodsinfo.currencySymbol }}{{ data.freight }}</view
              >
              <view v-if="data.endWeight === 0"
                >{{ data.startWeight }} KG {{$t('locales.top')}} {{ goodsinfo.currencySymbol
                }}{{ data.freight }}</view
              >
            </view>
            <view v-if="data.endWeight === ''">{{ data.startWeight }} KG {{$t('locales.top')}}
              {{ goodsinfo.currencySymbol }}{{ data.freight }}</view>
          </view>
          <view
            class="wightcontent"
            v-if="deliverdata.deliveryInfo.chargeMode === 1"
          >
            <view class="weight">
              {{$t('locales.fixedFreight')}}： {{ goodsinfo.currencySymbol }}{{ item.freight }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="confrim-btn">
      <view class="btn u-line-1" @click="delivershow = false"> {{$t('locales.close')}} </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    },
    deliverdata: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    value(val) {
      this.delivershow = val
    },
    data(val) {
      this.goodsinfo = val
    },
    deliverdata(val) {
     val.areaInfoList.map((res) => {
       res.freightInfoDTOList.map((item, index) => {
         if(item.endWeight === '') {

         }
       })
     })
    }
  },
  data() {
    return {
      delivershow: false,
      goodsinfo: {}
    }
  },
  methods: {
    close() {}
  }
}
</script>

<style lang="scss" scoped>
.popupstyle {
  .uni-scroll-view,
  .uni-scroll-view-content {
    background: #ffffff;
  }
  .delivecontent {
    height: 405px;
    overflow: scroll;
  }
}
.popuphead {
  height: 86rpx;
  font-size: 36rpx;
  line-height: 86rpx;
  text-align: center;
  font-weight: 500;
  border-bottom: 1px solid #e4e4e4;
}

.popuppage {
  height: 144rpx;
  border-bottom: 1px solid #e4e4e4;
  padding: 20rpx;
  span {
    width: 20rpx;
    height: 20rpx;
    background: #0049ac;
    border-radius: 50%;
    display: inline-block;
  }
  .time {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 36rpx;
    display: inline-block;
    padding-left: 10rpx;
  }
  .gopop {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    padding-left: 30rpx;
  }
}

.messge {
  display: flex;
  justify-content: space-between;
  height: 175rpx;
  border-bottom: 1px solid #e4e4e4;
  padding: 38rpx;
  .messgeone {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 32rpx;
  }
  .wightcontent {
    width: 50%;
  }
  .weight {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 32rpx;
  }
}

.btn {
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  color: #fff;
  background: #0049ac;
  padding: 0 15rpx;
  box-sizing: border-box;
}
</style>
